<template>
  <el-dialog
    :title="'绑定房屋'"
    v-model="model"
    width="600px"
    :before-close="closeHandle"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="绑定房屋" prop="roomId">
        <el-cascader
          style="width: 100%"
          v-model="form.roomId"
          :props="cascaderProps"
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeHandle">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup name="bindResident">
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  saveParkingSpace,
  updateParkingSpace,
  getCommunityPage,
  getFloorPage,
  getBuildingRoomPage,
  updateBindUnBindMember,
} from "@/api/realEstateManage";

const props = defineProps({
  communityId: {
    type: String,
    default: "",
  },
  row: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["submit"]);
const model = defineModel({
  default: false,
});

const formRef = ref();
const form = ref({
  roomId: "",
  communityId: "",
});

const rules = reactive({
  roomId: [{ required: true, message: "请选择房屋" }],
});
const isEdit = computed(() => {
  return !!props.row.id;
});
onMounted(() => {
  if (isEdit.value) {
    form.value = props.row;
  }
});
// 加载小区列表
const getCommunityList = () => {
  return new Promise((resolve, reject) => {
    getCommunityPage({
      pageNo: 1,
      pageSize: 999,
      id: props.communityId || props.row.communityId,
    }).then(({ data }) => {
      const result = data.records.map((item) => ({
        value: item.id,
        label: item.name,
      }));
      resolve(result);
    });
  });
};
// 加载楼栋列表
const getFloorList = (id) => {
  return new Promise((resolve) => {
    getFloorPage({
      pageNo: 1,
      pageSize: 999,
      communityId: id,
    }).then(({ data }) => {
      const result = data.records.map((item) => ({
        value: item.id,
        label: item.name,
      }));
      resolve(result);
    });
  });
};
// 加载房屋列表
const getBuildingRoomList = (id) => {
  return new Promise((resolve) => {
    getBuildingRoomPage({
      pageNo: 1,
      pageSize: 999,
      floorId: id,
    }).then(({ data }) => {
      const result = data.records.map((item) => ({
        value: item.id,
        label: item.roomNum,
      }));
      resolve(result);
    });
  });
};

const cascaderProps = {
  emitPath: false,
  lazy: true,
  lazyLoad: async (node, resolve) => {
    const { level, value } = node;
    console.log("[ level ] >", level);
    const map = {
      0: getCommunityList,
      1: getFloorList,
      2: getBuildingRoomList,
    };
    const list = await map[level](value);
    console.log("[ list ] >", list);
    const nodes = list.map((item) => ({
      value: item.value,
      label: item.label,
      leaf: level >= 2,
    }));
    resolve(nodes);
  },
};
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      updateParkingSpace({
        ...form.value,
        roomId: form.value.roomId,
        type: 1,
      }).then(({ data }) => {
        if (data) {
          ElMessage({
            message: "绑定成功",
            type: "success",
          });
          closeHandle();
          emit("submit", form.value);
        }
      });
    }
  });
};

const closeHandle = () => {
  model.value = false;
};
</script>

<style scoped>
.el-cascader {
  width: 100%;
}
</style>
